<script type="text/javascript">
    opts = {
        "currval":100,
        "animationSpeed":32,
        "angle":0.22,
        "lineWidth":0.36,
        "pointer":{"length":0.78,"color":"#000000","strokeWidth":0.030},
        "fontSize":20,
        "colorStart":"#6FADCF",
        "colorStop":"#8FC0DA",
        "strokeColor":"#E0E0E0",
        "generateGradient":true
    }

    function initStorGauge(){
        storGauge = new Gauge(document.getElementById("storage-canvas-preview"));
        //storGauge.setTextField(document.getElementById("storage_preview-textfield"));
        var totalVal = parseInt("{{ cluster.disk_total_gb|int }}");
        var usedVal = parseInt("{{ cluster.disk_used_gb }}");
        if (usedVal > totalVal){
            usedVal = totalVal;
        };
        if (totalVal == 0){
            totalVal = 19;
        };
        storGauge.maxValue = totalVal;
        storGauge.set(usedVal);
        //storGauge.set(parseInt("{{ cluster.volume_used }}"));
        storGauge.animationSpeed = opts.animationSpeed;
        opts.generateGradient = true;
        storGauge.setOptions(opts);
        storGauge.ctx.clearRect(0, 0, storGauge.ctx.canvas.width, storGauge.ctx.canvas.height);
        storGauge.render();
    };

	$(function(){
		var speed = 1;
	    nowWidth = $(".physical_progress_bar");
		var prog_width = parseInt($(".physical_progress_bar").parent('.progressBar').css('width'));
		var prog_total = parseInt("{{ cluster.disk_total_gb|int }}"); 
		var prog_used = parseInt("{{ cluster.disk_used_gb|int }}"); 

    	var bar_value =  prog_width * (prog_used/prog_total) 

//	    nowWidth.animate({width:bar_value},speed);
  	});
  
  
</script>
<div class="panel-heading"><a href="#">[[ "physical capacity"|translate ]]</a>
<a href="" class="panel-right-i"><i class="fa fa-gear"></i></a></div>
<div class="panel-body n_panel-body">
    <p class="amount-number" style="padding-top:28px;">{{ cluster.disk_total_gb|int }}</p>
    <p class="amount-info" style="padding-top:9px;">系统总容量(G)</p>
    <div class="progress_box">
        <p class="storage_been_val">
            <span class="progress_been_bar">
			{{ cluster.disk_used_gb|int }}
            <span class="been_stroage_bar">已用(G)</span>
            </span>
            <span class="progress_remain_bar">
                {{ cluster.disk_total_gb|int - cluster.disk_used_gb|int }}
            <span class="been_stroage_bar">剩余容量(G)</span>
            </span>
        </p>
        <div class="progressBar">
            <div class="progress_bar physical_progress_bar"></div>
        </div>
    </div>
</div>
<style type="text/css">
#storage_preview {
  background: #f9f9f9; position: relative;
  width: 220px;
  height: 220px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin:0 auto;
}
#storage-canvas-preview{
  width: 220px; top: 40px;
  position: relative;
}
#storage_preview-textfield{
    position: relative; width:150px;height:20px;margin-top:px;
    float:right;
    right:-40px;
    text-align: center; font-size:15px; font-weight: bold;
}
.stroage_number{
    width:200px;
    height:20px;
    position:relative;
    margin:0 auto;
    color:#636e7b;
    font-size:20px;
    margin-top:50px;
    text-align:center;
}
</style>
<!--
<div id="storage_preview">
    <canvas width=220 height=170 id="storage-canvas-preview"></canvas>
    <div id="storage_preview-textfield">总量：<span>{{ cluster.disk_total_gb|int }}</span>G</div>
    <div class="stroage_number">已用{{ cluster.disk_used|int }}G,<span>{{ cluster.disk_percent }}</span>%<span></span></div>
</div>
-->

